<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 员工列表</title>
    <link rel="shortcut icon" href="../../content/static/img/favicon.ico">
    <link href="../../content/css/common_modal.css" rel="stylesheet">
    <link href="../../content/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../../content/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../../content/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../../content/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="../../content/static/css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="../../content/static/css/animate.min.css" rel="stylesheet">
    <link href="../../content/static/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="../../content/static/css/style.min.css?v=4.0.0" rel="stylesheet">

    <style>
        .fa-female:before {
            color: #fb7cd5;
        }
        .fa-location-arrow:before {
            color: rebeccapurple;
        }
        .fa-mobile-phone:before, .fa-mobile:before{
            color: black;
        }
        .fa-map-marker:before {
            color: #1ab394;
        }
        table-th{
            font-size: 12px;
            font-family: tahoma, "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
            line-height: 1.42857143;
            color: #333;
            background-color: #f5f5f5;
        }
        .checkbox label{
            padding: 0px 15px 0px 5px;
        }
</style>
</head>

<body class="content-container">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <ol class="breadcrumb">
                            <li><a>基本设置</a></li>
                            <li><a>员工列表</a></li>
                        </ol>
                    </div>
                    <div class="ibox-content">
                        <div class="col-sm-12" style="background-color: #f5f5f5;padding: 12px 12px 10px">
                            <div class="col-sm-9"> </div>
                            <div class="col-sm-3">
                                <div class="input-group">
                                    <input type="text" placeholder="搜索用户名、员工姓名、手机号" class="input-sm form-control">
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"> 搜索</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
                            <div class="alert alert-info">
                                <button type="button" class="btn btn btn-primary" v-on:click="addShow(123)">新增</button>
                                <button type="button" class="btn btn btn-info"> 导入</button>
                                <button type="button" class="btn btn btn-success"> 导出</button>
                                &nbsp;&nbsp;<span>总条数：<span>12 条</span></span>
                            </div>
                        </div>
                        <table class="table table-hover">
                            <thead style="background: #f5f5f5;">
                                <tr>
                                    <th>
                                        <div class="checkbox checkbox-success">
                                            <input id="checkbox1" type="checkbox"><label for="checkbox1"> #</label>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="tooltip-demo">用户名
                                            <label class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom"
                                                title="" data-original-title="用户名用于系统登录的账号"></label>
                                        </div>
                                    </th>
                                    <th>员工姓名</th>
                                    <th>角色</th>
                                    <th>性别</th>
                                    <th>手机号</th>
                                    <th>邮箱</th>
                                    <th>状态</th>
                                    <th>地址</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="checkbox checkbox-success">
                                            <input id="checkbox2" type="checkbox"><label for="checkbox2"></label>
                                        </div>
                                    </td>
                                    <td>小张总</td>
                                    <td><a href="" data-toggle="modal" data-target="#edit">张三</a></td>
                                    <td class="text-navy">admin</td>
                                    <td>男</td>
                                    <td class="text-navy">15150444723</td>
                                    <td>15150444723@139.com</td>
                                    <td>正常</td>
                                    <td>江苏苏州工业园区88#</td>
                                    <td>
                                        <a href="" class="">编辑</a>
                                        <a href="" class="">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="checkbox checkbox-success">
                                            <input id="checkbox6" type="checkbox"><label for="checkbox6"></label>
                                        </div>
                                    </td>
                                    <td>小李总</td>
                                    <td><a href="" data-toggle="modal" data-target="#edit">李四</a></td>
                                    <td class="text-navy">销售组</td>
                                    <td>男</td>
                                    <td class="text-navy">15150444723</td>
                                    <td>15150444723@139.com</td>
                                    <td>正常</td>
                                    <td>江苏苏州工业园区88#</td>
                                    <td>
                                        <a href="" class="">编辑</a>
                                        <a href="" class="">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="checkbox checkbox-success">
                                            <input id="checkbox3" type="checkbox"><label for="checkbox3"></label>
                                        </div>
                                    </td>
                                    <td>王麻子</td>
                                    <td><a href="" data-toggle="modal" data-target="#edit">王总</a></td>
                                    <td class="text-warning">财务组</td>
                                    <td>女</td>
                                    <td class="text-navy">15150444723</td>
                                    <td>15150444723@139.com</td>
                                    <td>正常</td>
                                    <td>江苏苏州工业园区88#</td>
                                    <td>
                                        <a href="">编辑</a>
                                        <a href="">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="checkbox checkbox-success">
                                            <input id="checkbox4" type="checkbox"><label for="checkbox4"></label>
                                        </div>
                                    </td>
                                    <td>李文明</td>
                                    <td><a href="" data-toggle="modal" data-target="#edit">李文明</a></td>
                                    <td class="text-warning">仓管组</td>
                                    <td>男</td>
                                    <td class="text-navy">15150444723</td>
                                    <td>15150444723@139.com</td>
                                    <td>正常</td>
                                    <td>江苏苏州工业园区88#</td>
                                    <td>
                                        <a href="">编辑</a>
                                        <a href="">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="checkbox checkbox-success">
                                            <input id="checkbox5" type="checkbox"><label for="checkbox5"></label>
                                        </div>
                                    </td>
                                    <td>赵敏</td>
                                    <td><a href="" data-toggle="modal" data-target="#edit">赵敏</a></td>
                                    <td class="text-warning">采购组</td>
                                    <td>女</td>
                                    <td class="text-navy">15150444723</td>
                                    <td>15150444723@139.com</td>
                                    <td>正常</td>
                                    <td>江苏苏州工业园区88#</td>
                                    <td>
                                        <a href="">编辑</a>
                                        <a href="">删除</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="fixed-table-pagination col-sm-12">
                            <div class="pull-left pagination-detail" style="float: right;">
                                <span class="pagination-info" style="line-height: 74px;margin-right: 1125px;">显示第 1
                                    到第
                                    10 条记录，总共 21 条记录</span>
                                <ul class="pagination pagination-outline" style="float: right;">
                                    <li class="page-first disabled"><a href="javascript:void(0)">«</a></li>
                                    <li class="page-pre disabled"><a href="javascript:void(0)">‹</a></li>
                                    <li class="page-number active"><a href="javascript:void(0)">1</a></li>
                                    <li class="page-number"><a href="javascript:void(0)">2</a></li>
                                    <li class="page-number"><a href="javascript:void(0)">3</a></li>
                                    <li class="page-next"><a href="javascript:void(0)">›</a></li>
                                    <li class="page-last"><a href="javascript:void(0)">»</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="display: none;" v-show="pageInit">
            <!-- 新增弹框 -->
            <modal v-bind:show.sync="addModal.show" v-bind:style="addModal .style" v-bind:add-class="addModal.addClass">
                <h4 slot="header">新增员工信息</h4>
                <div slot="body" class="clearfix">
                    <blockquote>
                        <small>基本信息</small>
                    </blockquote>
                    <form class="form-horizontal m-t" id="signupForm" novalidate="novalidate" style="border-top: 1px solid #1ab497;">
                        <div class="form-group" style="margin-top: 15px">
                            <label class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-4">
                                <input id="firstname" name="firstname" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">员工姓名</label>
                            <div class="col-sm-4">
                                <input id="lastname" name="lastname" class="form-control" type="text" aria-required="true"
                                    aria-invalid="false">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-4">
                                <div class="radio radio-info radio-inline">
                                    <input type="radio" id="inlineRadio1" value="option1" name="radioInline" checked="">
                                    <label for="inlineRadio1"> 男</label>
                                </div>
                                <div class="radio radio-inline">
                                    <input type="radio" id="inlineRadio2" value="option2" name="radioInline">
                                    <label for="inlineRadio2"> 女</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">登录密码</label>
                            <div class="col-sm-4">
                                <input id="confirm_password" name="confirm_password" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">确认密码</label>
                            <div class="col-sm-4">
                                <input id="confirm_password" name="confirm_password" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">手机号</label>
                            <div class="col-sm-4">
                                <input id="password" name="password" class="form-control" type="text">
                            </div><button type="button" class="btn btn-outline btn-default" v-on:click="modPhoneShow()">绑定手机号</button>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-4">
                                <input id="confirm_password" name="confirm_password" class="form-control" type="text">
                            </div><button type="button" class="btn btn-outline btn-default">绑定邮箱</button>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">地址</label>
                            <div class="col-sm-4">
                                <textarea id="ccomment" name="comment" class="form-control" required="" aria-required="true"></textarea>
                            </div>
                        </div>
                    </form>
                    <blockquote>
                        <small>权限分配</small>
                    </blockquote>
                    <form class="form-horizontal m-t" id="signupForm" novalidate="novalidate" style="border-top: 1px solid #1ab497;">
                        <div class="form-group" style="margin-top: 15px">
                            <label class="col-sm-2 control-label tooltip-demo">角色
                                <label class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom" title=""
                                    data-original-title="该客户的唯一编码,系统自动生成"></label>
                            </label>
                            <div class="col-sm-4" style="margin-top: 7px;">
                                <a href="" class="">管理员</a>
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 15px">
                            <label class="col-sm-2 control-label tooltip-demo">关联仓库
                                <label class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom" title=""
                                    data-original-title="该客户的唯一编码,系统自动生成"></label>
                            </label>
                            <div class="col-sm-4">
                                <div class="checkbox checkbox-success" style="float: left;width: 144px;">
                                    <input id="checkbox2" type="checkbox"><label for="checkbox2"> #A仓</label>
                                </div>
                                <div class="checkbox checkbox-success">
                                    <input id="checkbox3" type="checkbox"><label for="checkbox3"> #B仓</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 15px">
                            <label class="col-sm-2 control-label tooltip-demo">价格权限</label>
                            </label>
                            <div class="checkbox checkbox-success" style="float: left;margin-left: 15px;">
                                <input id="checkbox4" type="checkbox"><label for="checkbox4"> 零售价</label>
                            </div>
                            <div class="checkbox checkbox-success" style="float: left;">
                                <input id="checkbox5" type="checkbox"><label for="checkbox5"> 批发价</label>
                            </div>
                            <div class="checkbox checkbox-success" style="float: left;">
                                <input id="checkbox6" type="checkbox"><label for="checkbox6"> 参考进货价</label>
                            </div>
                            <div class="checkbox checkbox-success" style="float: left;">
                                <input id="checkbox7" type="checkbox"><label for="checkbox7"> 最低售价</label>
                            </div>
                            <div class="checkbox checkbox-success" style="float: left;">
                                <input id="checkbox8" type="checkbox"><label for="checkbox8"> 成本价</label>
                            </div>
                            <div class="checkbox checkbox-success" style="float: left;">
                                <input id="checkbox9" type="checkbox"><label for="checkbox9"> 等级价 </label>
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 15px">
                            <label class="col-sm-2 control-label tooltip-demo">其他</label>
                            </label>
                            <div class="col-sm-10">
                                <div class="checkbox checkbox-success">
                                    <input id="checkbox10" type="checkbox"><label for="checkbox10"> 查看他人单据</label>
                                    <br /> <span style="color:#1ab394"><span>* </span>勾选后，可以查看他人经手的单据。</span>
                                </div>
                                <div class="checkbox checkbox-success">
                                    <input id="checkbox11" type="checkbox"><label for="checkbox11"> 作废他人单据 </label>
                                    <br /> <span style="color:#1ab394"><span>* </span>勾选后，可以作废他人经手的单据。</span>
                                </div>
                                <div class="checkbox checkbox-success">
                                    <input id="checkbox12" type="checkbox"><label for="checkbox12"> 查看他人客户 </label>
                                    <br /> <span style="color:#1ab394"><span>* </span>勾选后，可以查看关联他人的客户和客户应收欠款，开单时也可以选择关联他人的客户</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">
                                <div class="tooltip-demo">用户名
                                    <label class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom"
                                        title="" title="用户名用于系统登录的账号"></label>
                                </div>
                            </label>
                            <div class="col-sm-4">
                                <div class="radio radio-info radio-inline">
                                    <input type="radio" id="inlineRadio1" value="option1" name="radioInline" checked="">
                                    <label for="inlineRadio1"> 正常</label>
                                </div>
                                <div class="radio radio-inline">
                                    <input type="radio" id="inlineRadio2" value="option2" name="radioInline">
                                    <label for="inlineRadio2"> 锁定</label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </modal>
            <!-- 更改手机号 -->
            <modal v-bind:show.sync="modPhoneModal.show" v-bind:style="modPhoneModal .style" v-bind:add-class="modPhoneModal.addClass">
                <h4 slot="header">绑定手机号<span class="title-tips">绑定后可当作用户名登录</span></h4>
                <div slot="body" class="clearfix">
                        <form class="form-horizontal m-t" id="signupForm" novalidate="novalidate" >
                        <div class="form-group" style="margin-top: 15px">
                            <label class="col-sm-2 control-label">新手机号</label>
                            <div class="col-sm-4">
                                <input id="firstname" name="firstname" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 15px">
                            <label class="col-sm-2 control-label">手机验证码</label>
                            <div class="col-sm-4">
                                <input id="firstname" name="firstname" class="form-control" type="text">
                            </div><button type="button" class="btn btn-outline btn-default" >获取验证码</button>
                        </div>
                    </form>
                </div>
            </modal>
        </div>
    </div>
    <script src="../../content/js/lib/vue/vue.min.js"></script>
    <script src="../../content/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="../../content/static/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="../../content/static/js/plugins/switchery/switchery.js"></script>
    <script src="../../content/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../../content/static/js/content.min.js?v=1.0.0"></script>
    <script src="../../content/js/lib/vue/vue-modal.js"></script>
    <script src="../../content/js/lib/vue/vue-pagination.js"></script>
    <script src="../../content/js/common.js"></script>
    <script src="../../content/static/js/plugins/iCheck/icheck.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".i-checks").iCheck({
                checkboxClass: "icheckbox_square-green",
                radioClass: "iradio_square-green",
            });
        });
        var vmData = {
            addModal: {
                show: false,
                style: {
                    width: '780px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.addModal.show = false;
                }
            },
            modPhoneModal: {
                show: false,
                style: {
                    width: '780px',
                    height: "260px"
                },
                func: {
                    type: Function
                },
                close: function () {
                    vm.modPhoneModal.show = false;
                }
            },
        };
        vmData = $.extend(vmData, baseData);
        var vmMothod = {
            init: function () {},
            addShow: function () {
                vm.addModal.show = true;
            },
            modPhoneShow: function () {
                vm.modPhoneModal.show = true;
            }
        };
        vmMothod = $.extend(vmMothod);
        var vm = new Vue({
            el: '.content-container',
            data: vmData,
            methods: vmMothod
        });
        vm.init();
    </script>
</body>

</html>